<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>年度运维总结</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/bootstrap-icons.css" rel="stylesheet">
    <script src="/js/sweetalert2.js"></script>
    <style>
        .summary-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
        }
        
        .summary-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
        }
        
        .stat-card {
            padding: 1.5rem;
            border-radius: 12px;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: none;
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: scale(1.02);
        }
        
        .stat-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            color: white;
            font-size: 1.5rem;
        }
        
        .stat-title {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 0.25rem;
        }
        
        .stat-trend {
            font-size: 0.875rem;
            color: #10b981;
        }
        
        .section-title {
            position: relative;
            padding-left: 1rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
            color: #1f2937;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 24px;
            background: linear-gradient(to bottom, #6366f1, #4f46e5);
            border-radius: 2px;
        }
        
        .description-card {
            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 2rem;
        }
        
        .description-text {
            color: #4b5563;
            line-height: 1.6;
            /*white-space: pre-line;*/
        }
        
        .hospital-info {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
            padding: 1rem;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 12px;
        }
        
        .hospital-icon {
            width: 64px;
            height: 64px;
            background: white;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        .hospital-icon i {
            font-size: 2rem;
            color: #4f46e5;
        }
        
        .hospital-details h2 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.25rem;
        }
        
        .hospital-details p {
            font-size: 1rem;
            color: #6b7280;
            margin: 0;
        }
        
        .grid-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        @media (max-width: 768px) {
            .grid-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            
            .stat-card {
                padding: 1rem;
            }
            
            .stat-icon {
                width: 36px;
                height: 36px;
                font-size: 1.2rem;
                margin-bottom: 0.75rem;
            }
            
            .stat-title {
                font-size: 0.8rem;
                margin-bottom: 0.25rem;
            }
            
            .stat-value {
                font-size: 1.1rem;
                margin-bottom: 0.15rem;
            }
            
            .stat-trend {
                font-size: 0.75rem;
            }
            
            .hospital-info {
                flex-direction: column;
                text-align: center;
            }
            
            .hospital-icon {
                margin: 0 0 1rem 0;
            }
        }
    </style>
</head>
<body>
    <div class="page-background bg-summary"></div>
    <div class="wave-bottom"></div>
    
    <div class="slide-container" id="slideContainer">
        <div class="slide-content" id="slideContent">
            <div class="container mt-4">
                <div class="summary-card p-4">
                    <!-- 医院信息 -->
                    <div class="hospital-info">
                        <div class="hospital-icon">
                            <i class="bi bi-building"></i>
                        </div>
                        <div class="hospital-details">
                            <h2 th:text="${report.hospitalName}">医院名称</h2>
                            <p th:text="${report.demandYear + '年度运维总结'}">2024年度运维总结</p>
                        </div>
                    </div>

                    <!-- 运维统计 -->
                    <div class="section-title">年度运维概况</div>
                    <div class="grid-stats">
                        <div class="stat-card"  th:onclick="|window.location.href='@{/reports/{reportUuid}/top-requests(reportUuid=${report.reportUuid})}'|">
                            <div style="display: flex;align-items: center;">
                                <div class="stat-icon">
                                    <i class="bi bi-list-check"></i>
                                </div>
                                <div class="stat-title" style="margin-left: 5px;">运维工作总数</div>
                            </div>
                            <div class="stat-value" th:text="${report.totalRequests + '个'}">0</div>
                        </div>
                        
                        <div class="stat-card">
                            <div style="display: flex;align-items: center;">
                                <div class="stat-icon">
                                    <i class="bi bi-clock-history"></i>
                                </div>
                                <div class="stat-title"style="margin-left: 5px;">运维工作总时长</div>
                            </div>
                            <div class="stat-value" th:text="${report.totalOpsHours + '小时'}">0小时</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div style="display: flex;align-items: center;">
                            <div class="stat-icon">
                                <i class="bi bi-calendar-check"></i>
                            </div>
                            <div class="stat-title" style="margin-left: 5px;">年度最晚运维服务时间</div>
                        </div>
                        <div class="stat-value" th:text="${#temporals.format(report.lastOpsTime, 'yyyy-MM-dd HH:mm:ss')}">--</div>
                    </div>

                    <!-- 故障统计 -->
                    <div class="section-title">年度故障分析</div>
                    <div class="stat-card">
                        <div style="display: flex;align-items: center;">
                            <div class="stat-icon">
                                <i class="bi bi-exclamation-triangle"></i>
                            </div>
                            <div class="stat-title" style="margin-left: 5px;">年度故障总数</div>
                        </div>
                        <div class="stat-value" th:text="${report.totalFaults + '个'}">0</div>
                    </div>
                    <!-- 故障趋势图表 -->
                    <div class="stat-card">
                        <div id="faultChart" style="width: 100%; height: 300px;"></div>
                    </div>
                    <div class="grid-stats">
                        <div class="stat-card">
                            <div style="display: flex;align-items: center;">
                                <div class="stat-icon">
                                    <i class="bi bi-people"></i>
                                </div>
                                <div class="stat-title" style="margin-left: 5px;">第三方故障数</div>
                            </div>
                            <div class="stat-title">出现次数/解决次数</div>
                            <div class="stat-value">
                                <span th:text="${report.thirdPartyResolvedFaults + '/' + report.thirdPartyFaults}">0/0</span>
                            </div>
                            <div class="stat-trend">
                                <span th:if="${report.thirdPartyFaults > 0}"
                                      th:text="${#numbers.formatDecimal(report.thirdPartyResolvedFaults * 100.0 / report.thirdPartyFaults, 1, 1) + '%'}">
                                    0%
                                </span>
                                <span th:if="${report.thirdPartyFaults == 0}">0%</span>
                                <span>解决率</span>
                            </div>
                        </div>
                        
                        <div class="stat-card">
                            <div style="display: flex;align-items: center;">
                                <div class="stat-icon">
                                    <i class="bi bi-gear"></i>
                                </div>
                                <div class="stat-title" style="margin-left: 5px;">智医故障数</div>
                            </div>
                            <div class="stat-title">出现次数/解决次数</div>
                            <div class="stat-value">
                                <span th:text="${report.internalResolvedFaults + '/' + report.internalFaults}">0/0</span>
                            </div>
                            <div class="stat-trend">
                                <span th:if="${report.internalFaults > 0}"
                                      th:text="${#numbers.formatDecimal(report.internalResolvedFaults * 100.0 / report.internalFaults, 1, 1) + '%'}">
                                    0%
                                </span>
                                <span th:if="${report.internalFaults == 0}">0%</span>
                                <span>解决率</span>
                            </div>
                        </div>
                    </div>

                    <!-- 补充说明 -->
<!--                    <div class="description-card">-->
<!--                        <div class="section-title">补充说明</div>-->
<!--                        <div class="description-text">-->
<!--                            <span th:if="${report.description == null or report.description == ''}" >暂无补充说明</span>-->
<!--                            <span th:if="${report.description}" th:text="${report.description}"></span>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>

    <!-- 滑动提示 -->
    <div class="slide-hint" id="slideHint"></div>

    <!-- 页面指示器 -->
    <div class="slide-indicator" id="slideIndicator">
        <div class="slide-dot active"></div>
        <div class="slide-dot"></div>
        <div class="slide-dot"></div>
        <div class="slide-dot"></div>
    </div>

    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="/js/slide.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initFaultChart();
        });

        function initFaultChart() {
            // 获取故障统计数据
            const reportUuid = "[[${report.reportUuid}]]";

            // 显示加载中弹窗
            Swal.fire({
                title: '趋势分析查询中...',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });

            fetch(`/api/faults/${reportUuid}/monthly-fault-stats`)
                .then(response => response.json())
                .then(data => {
                    // 关闭加载中弹窗
                    Swal.close();
                    // 准备图表数据
                    const months = data.map(item => item.month + '月');
                    const totalFaults = data.map(item => item.totalFaults);
                    const thirdPartyFaults = data.map(item => item.thirdPartyFaults);
                    const internalFaults = data.map(item => item.internalFaults);

                    const chart = echarts.init(document.getElementById('faultChart'));
                    const option = {
                        title: {
                            text: '故障趋势分析',
                            left: 'center',
                            textStyle: {
                                color: '#1f2937',
                                fontSize: 16,
                                fontWeight: 'normal'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line'
                            }
                        },
                        legend: {
                            data: ['总故障数', '第三方故障', '智医故障'],
                            bottom: 0
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '60px',
                            top: '60px',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: months,
                            axisLine: {
                                lineStyle: {
                                    color: '#6b7280'
                                }
                            },
                            axisLabel: {
                                color: '#6b7280'
                            }
                        },
                        yAxis: {
                            type: 'value',
                            minInterval: 1,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#6b7280'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e5e7eb'
                                }
                            },
                            axisLabel: {
                                color: '#6b7280'
                            }
                        },
                        series: [
                            {
                                name: '总故障数',
                                type: 'line',
                                data: totalFaults,
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 3
                                },
                                itemStyle: {
                                    color: '#6366f1'
                                }
                            },
                            {
                                name: '第三方故障',
                                type: 'line',
                                data: thirdPartyFaults,
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 3
                                },
                                itemStyle: {
                                    color: '#10b981'
                                }
                            },
                            {
                                name: '智医故障',
                                type: 'line',
                                data: internalFaults,
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 3
                                },
                                itemStyle: {
                                    color: '#ef4444'
                                }
                            }
                        ]
                    };
                    chart.setOption(option);

                    // 监听窗口大小变化，调整图表大小
                    window.addEventListener('resize', () => {
                        chart.resize();
                    });
                })
                .catch(error => {
                    console.error('获取故障统计数据失败:', error);
                    // 关闭加载中弹窗并显示错误信息
                    Swal.fire({
                        icon: 'error',
                        title: '加载失败',
                        text: '获取记录时发生错误，请稍后重试',
                        confirmButtonText: '确定'
                    });
                });
        }
    </script>
</body>
</html> 